<template>
	<view class="index-home">

		<!-- 轮播 -->
		<ad-swipers :pid="7" height="798rpx" padding="0" radius="20rpx"></ad-swipers>

		<view class="home-head-bg-default" :style="{height:navHeight, paddingTop:statusBarHeight}"
			@click="goUrl('/pages/shop_street/shop_street')">
			<image style="position: relative;width: 25rpx;height: 32rpx;margin-right: 10rpx;"
				src="../../static/images/icon_shop_change.png">
			</image>
			<text
				style="font-size: 30rpx;font-weight: 700;color: #fff;opacity: 0.9;">{{homeData.current_shop?homeData.current_shop.name:''}}</text>
		</view>

		<view class="home-default-warp">
			<view class="search-box" @click="goUrl('/pages/goods_search/goods_search')">
				<u-search class="content" wrap-bg-color="#fff" bg-color="#fff" :height="60" placeholder-color="#ababab">
				</u-search>
				<view class="search-bth" :style="{backgroundColor:'#eb5a41'}">
					搜索</view>
			</view>

			<view class="content-warp">
				<view class="information m-t-20">
					<swiper class="flex-1" autoplay="true" style="height: 60rpx;" vertical="true" circular="true"
						:interval="3000">
						<swiper-item v-for="(item, index) in newsList" :key="item.id" class="flex">
							<image style="position: relative;width: 26rpx;height: 24rpx;margin-right: 10rpx;"
								src="../../static/images/icon_notice.png">
								<view class="line-1" style="font-size: 24rpx;color: #303030;flex: 1;"
									@click="goUrl('/bundle/pages/article_detail/article_detail?id='+item.id)">
									{{item.title}}
								</view>
						</swiper-item>
					</swiper>
				</view>

				<view class="nav bg-white m-t-20" v-if="menuList.length>0">
					<view class="nav-list flex flex-wrap">
						<view class="nav-item m-t-30 m-b-30" v-for="(item,index) in menuList" :key="index">
							<view class="flex-col col-center" @click="menuJump(item)">
								<image class="nav-icon m-b-15" :src="item.image" mode="aspectFit"></image>
								<view class="name xs">{{item.title}}</view>
							</view>
						</view>
					</view>
				</view>

				<view v-for="(item,index) in themeList.template6" :key="item.id" class="goods_list_area m-t-20">
					<view class="goods_area_head">
						<router-link
							:to="(item.have_child==1?'/pages/topic_list/topic_list':'/pages/active_list/active_list')+'?type=hot&title='+item.name+'&'+(item.type=='theme'?'shopThemeId':'shopCateId')+'='+item.id">
							<image :src="item.image" style="width: 100%;" mode="widthFix"></image>
						</router-link>
					</view>
					<view class="goods_area_body">
						<router-link v-for="(cell, idx) in item.template_data" :key="cell.id"
							:to="{path: '/pages/goods_details/goods_details', query: {id: cell.goods_id || cell.id}}">
							<view class="goods_list_cell" v-if="idx<3">
								<view class="goods-img">
									<u-image width="215rpx" height="278rpx" :src="cell.image"></u-image>
								</view>
								<view class="goods-info">
									<view class="goods-name line-1">{{cell.name}}</view>
									<view class="goods-price">
										<view>
											<price-format :color="colorConfig.primary" :first-size="26"
												:second-size="26" :subscript-size="22" :price="cell.min_price">
											</price-format>
											<price-format :color="colorConfig.muted"
												v-if="cell.min_price!=cell.origin_price" :first-size="26"
												:second-size="26" :subscript-size="22" line-through
												:price="cell.origin_price" style="margin-left: 10rpx;"></price-format>
										</view>
										<image src="../../static/images/icon_cart_small.png"
											style="width: 32rpx;height: 28rpx;" mode="aspectFit"></image>
									</view>
								</view>
							</view>
						</router-link>
					</view>
				</view>

				<view v-for="(item,index) in themeList.template4" :key="item.id" class="goods_list_area m-t-20">
					<view class="goods_area_head">
						<image :src="item.image" style="width: 100%;" mode="widthFix"></image>
					</view>
					<view class="choice_area_body">
						<view class="home-choice-book" v-for="(cell,idx) in item.template_data" :key="cell.id">
							<router-link class="three-item"
								:to="(cell.have_child==1?'/pages/topic_list/topic_list':'/pages/active_list/active_list')+'?type=hot&title='+cell.name+'&'+(item.type=='theme'?'shopThemeId':'shopCateId')+'='+cell.id">
								<image :src="cell.image" style="width: 100%;height: 196rpx;" mode="aspectFit"></image>
								<view class="choice-book-name">
									<text style="font-size: 25rpx;font-weight: 700;">{{cell.name}}</text>
								</view>
							</router-link>
						</view>
					</view>
				</view>

				<view class="ad-space-box m-t-20">
					<view class="space-box"
						:style="'background-image: url('+imagePath+'/images/banner/default/study_space_box_1.png);background-size: cover;background-repeat: no-repeat;'">
						<view>
							<image class="space-box-title" src="../../static/images/icon_space_title.png"></image>
							<view class="space-box-cell" style="top: 78rpx;">
								<view class="box-cell-title">小学全学段</view>
								<view class="box-cell-con">
									<view class="grade-cell"
										@click="goUrl('/pages/topic_list/topic_list?type=hot&title=一年级&shopThemeId=137')">
										一年级</view>
									<view class="grade-cell"
										@click="goUrl('/pages/topic_list/topic_list?type=hot&title=二年级&shopThemeId=168')">
										二年级</view>
									<view class="grade-cell"
										@click="goUrl('/pages/topic_list/topic_list?type=hot&title=三年级&shopThemeId=169')">
										三年级</view>
									<view class="grade-cell"
										@click="goUrl('/pages/topic_list/topic_list?type=hot&title=四年级&shopThemeId=170')">
										四年级</view>
									<view class="grade-cell"
										@click="goUrl('/pages/topic_list/topic_list?type=hot&title=五年级&shopThemeId=145')">
										五年级</view>
									<view class="grade-cell"
										@click="goUrl('/pages/topic_list/topic_list?type=hot&title=六年级&shopThemeId=146')">
										六年级</view>
								</view>
							</view>
							<view class="space-box-cell" style="top: 262rpx;">
								<view class="box-cell-title">初中/高中</view>
								<view class="box-cell-con">
									<view class="grade-cell"
										@click="goUrl('/pages/topic_list/topic_list?type=hot&title=七年级&shopThemeId=147')">
										七年级</view>
									<view class="grade-cell"
										@click="goUrl('/pages/topic_list/topic_list?type=hot&title=八年级&shopThemeId=148')">
										八年级</view>
									<view class="grade-cell"
										@click="goUrl('/pages/topic_list/topic_list?type=hot&title=九年级&shopThemeId=149')">
										九年级</view>
									<view class="grade-cell"
										@click="goUrl('/pages/topic_list/topic_list?type=hot&title=高中全年级&shopThemeId=58')">
										高中全年级</view>
									<view class="grade-cell" style="width: 140rpx;text-align: center;"
										@click="goUrl('/pages/active_list/active_list?type=hot&title=高考冲刺&shopThemeId=66')">
										高考冲刺</view>
								</view>
							</view>
							<view class="space-box-btn">
								<router-link to="/pages/active_list/active_list?type=hot&title=指导书目&shopThemeId=65">
									<text>指导书目</text>
									<image src="../../static/images/icon_right_white.png"
										style="width: 12rpx;height: 16rpx;margin-left: 10rpx;" mode="widthFix"></image>
								</router-link>
							</view>
						</view>
					</view>
					<view class="ad-box" v-if="adList.length>0&&adList.length<=2">
						<view @click="goPage(adList[0])">
							<image style="width: 346rpx;height: 310rpx;border-radius: 10rpx;" mode="aspectFill"
								:src="adList[0].image">
							</image>
						</view>
						<view @click="goPage(adList[1])">
							<image style="width: 346rpx;height: 192rpx;border-radius: 10rpx;" mode="aspectFill"
								:src="adList[1].image">
							</image>
						</view>
					</view>
					<view class="ad-box" v-if="adList.length>0&&adList.length>2">
						<view @click="goPage(adList[0])">
							<image style="width: 346rpx;height: 192rpx;border-radius: 10rpx;" mode="aspectFill"
								:src="adList[0].image">
							</image>
						</view>
						<view @click="goPage(adList[1])">
							<image style="width: 346rpx;height: 146rpx;border-radius: 10rpx;" mode="aspectFill"
								:src="adList[1].image">
							</image>
						</view>
						<view @click="goPage(adList[2])">
							<image style="width: 346rpx;height: 146rpx;border-radius: 10rpx;" mode="aspectFill"
								:src="adList[2].image">
							</image>
						</view>
					</view>
				</view>

				<view v-for="(item,index) in themeList.template1" :key="item.id" class="home-classify-1 m-t-20">
					<view class="home-classify-title">
						<image :src="item.image" style="width: 100%;" mode="widthFix"></image>
					</view>
					<view class="home-classify-con">
						<view class="home-classify-book" v-for="(cell,idx) in item.template_data" :key="cell.id">
							<router-link class="three-item"
								:to="(cell.have_child==1?'/pages/topic_list/topic_list':'/pages/active_list/active_list')+'?type=hot&title='+cell.name+'&'+(item.type=='theme'?'shopThemeId':'shopCateId')+'='+cell.id">
								<image :src="cell.image" style="width: 100%;height: 196rpx;" mode="aspectFit"></image>
								<view class="classify-book-more">
									<text style="font-size: 25rpx;">{{cell.name}}</text>
									<text style="font-size: 22rpx;">更多攻略<text class="arrow_right"></text></text>
								</view>
								<view class="classify-book-name">
									<text style="font-size: 25rpx;font-weight: 700;">{{cell.remark}}</text>
								</view>
							</router-link>
						</view>
					</view>
				</view>

				<view v-for="(item,index) in themeList.template5" :key="item.id" class="goods_list_area m-t-20">
					<view class="goods_area_head">
						<image :src="item.image" style="width: 100%;" mode="widthFix"></image>
					</view>
					<view class="top20_area_body">
						<view class="home-top20-book" v-for="(cell,idx) in item.template_data" :key="cell.id">
							<router-link class="three-item"
								:to="(cell.have_child==1?'/pages/topic_list/topic_list':'/pages/active_list/active_list')+'?type=hot&title='+cell.name+'&'+(item.type=='theme'?'shopThemeId':'shopCateId')+'='+cell.id">
								<image :src="cell.image" style="width: 100%;height: 180rpx;" mode="aspectFit"></image>
								<view class="top20-book-name">
									<text style="font-size: 25rpx;font-weight: 700;">{{cell.name}}</text>
								</view>
							</router-link>
						</view>
					</view>
				</view>

				<view class="brand_box m-t-20"
					:style="'background-image: url('+imagePath+'/images/banner/default/brand_box_bg.png);background-size: cover;'">
					<router-link to="/pages/active_list/active_list?type=hot&title=长江少年儿童出版社&shopThemeId=36">
						<view class="brand_box_cell brand_type_1">
							<image class="brand_logo" :src="imagePath+'/images/banner/20240425/1.png'" mode="aspectFit">
							</image>
						</view>
					</router-link>
					<router-link to="/pages/active_list/active_list?type=hot&title=长江文艺出版社&shopThemeId=37">
						<view class="brand_box_cell brand_type_1">
							<image class="brand_logo" :src="imagePath+'/images/banner/20240425/2.png'" mode="aspectFit">
							</image>
						</view>
					</router-link>
					<router-link to="/pages/active_list/active_list?type=hot&title=海豚传媒&shopThemeId=41">
						<view class="brand_box_cell brand_type_1">
							<image class="brand_logo" :src="imagePath+'/images/banner/20240425/4.png'" mode="aspectFit">
							</image>
						</view>
					</router-link>
					<router-link to="/pages/active_list/active_list?type=hot&title=湖北美术出版社&shopThemeId=38">
						<view class="brand_box_cell brand_type_1">
							<image class="brand_logo" :src="imagePath+'/images/banner/20240425/5.png'" mode="aspectFit">
							</image>
						</view>
					</router-link>
					<router-link to="/pages/active_list/active_list?type=hot&title=中信出版集团股份有限公司&shopThemeId=39">
						<view class="brand_box_cell brand_type_1">
							<image class="brand_logo" :src="imagePath+'/images/banner/20240425/6.png'" mode="aspectFit">
							</image>
						</view>
					</router-link>
					<router-link to="/pages/active_list/active_list?type=hot&title=安徽少年儿童出版社&shopThemeId=40">
						<view class="brand_box_cell brand_type_1">
							<image class="brand_logo" :src="imagePath+'/images/banner/20240425/7.png'" mode="aspectFit">
							</image>
						</view>
					</router-link>
					<router-link to="/pages/active_list/active_list?type=hot&title=果麦文化&shopThemeId=42">
						<view class="brand_box_cell brand_type_2">
							<image class="brand_logo" :src="imagePath+'/images/banner/20240425/8.png'" mode="aspectFit">
							</image>
						</view>
					</router-link>
					<router-link to="/pages/active_list/active_list?type=hot&title=读客文化&shopThemeId=43">
						<view class="brand_box_cell brand_type_2">
							<image class="brand_logo" :src="imagePath+'/images/banner/20240425/9.png'" mode="aspectFit">
							</image>
						</view>
					</router-link>
					<router-link to="/pages/active_list/active_list?type=hot&title=磨铁&shopThemeId=44">
						<view class="brand_box_cell brand_type_2">
							<image class="brand_logo" :src="imagePath+'/images/banner/20240425/3.png'" mode="aspectFit">
							</image>
						</view>
					</router-link>
					<router-link to="/pages/active_list/active_list?type=hot&title=童趣&shopThemeId=45">
						<view class="brand_box_cell brand_type_2">
							<image class="brand_logo" :src="imagePath+'/images/banner/20240425/10.png'"
								mode="aspectFit">
							</image>
						</view>
					</router-link>
				</view>

				<view v-for="(item,index) in themeList.template2" :key="item.id" class="goods_list_area m-t-20">
					<view class="goods_area_head">
						<router-link
							:to="(item.have_child==1?'/pages/topic_list/topic_list':'/pages/active_list/active_list')+'?type=hot&title='+item.name+'&'+(item.type=='theme'?'shopThemeId':'shopCateId')+'='+item.id">
							<image :src="item.image" style="width: 100%;" mode="widthFix"></image>
						</router-link>
					</view>
					<view class="goods_area_body">
						<router-link v-for="(cell, idx) in item.template_data" :key="cell.id"
							:to="{path: '/pages/goods_details/goods_details', query: {id: cell.goods_id || cell.id}}">
							<view class="goods_list_cell" v-if="idx<3">
								<view class="goods-img">
									<u-image width="215rpx" height="278rpx" :src="cell.image"></u-image>
								</view>
								<view class="goods-info">
									<view class="goods-name line-1">{{cell.name}}</view>
									<view class="goods-price">
										<view>
											<price-format :color="colorConfig.primary" :first-size="26"
												:second-size="26" :subscript-size="22" :price="cell.min_price">
											</price-format>
											<price-format :color="colorConfig.muted"
												v-if="cell.min_price!=cell.origin_price" :first-size="26"
												:second-size="26" :subscript-size="22" line-through
												:price="cell.origin_price" style="margin-left: 10rpx;"></price-format>
										</view>
										<image src="../../static/images/icon_cart_small.png"
											style="width: 32rpx;height: 28rpx;" mode="aspectFit"></image>
									</view>
								</view>
							</view>
						</router-link>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		arraySlice,
		menuJump
	} from '@/utils/tools'
	import {
		mapGetters
	} from 'vuex'
	import {
		getAdList
	} from '@/api/store';
	import Cache from "@/utils/cache";
	import {
		imagePath
	} from '@/config/app';
	export default {
		props: {
			navList: {
				type: Array,
				default: () => ([])
			},
			list: {
				type: Array,
				default: () => ([])
			},
			homeData: {
				type: Object,
				default: () => ({})
			},
			liveList: {
				type: Array,
				default: () => ([])
			},
			goodsList: {
				type: Array,
				default: () => ([])
			},
			themeList: {
				type: Object,
				default: () => ({
					template1: [],
					template2: [],
					template3: [],
					template4: [],
					template5: [],
					template6: []
				})
			}
		},
		data() {
			return {
				imagePath: imagePath,
				newNavList: [],
				newsList: [],
				adList: [],
				menuList: [],
				hotSearch: [],
				navSwiperH: '',
				currentSwiper: 0,
				isDischarge: false,
				timestamp: 0, //秒杀倒计时时间戳
				d: '00', // 天的默认值
				h: '00', // 小时的默认值
				i: '00', // 分钟的默认值
				s: '00', // 秒的默认值
				timer: null, // 定时器
				seconds: 0, // 记录不停倒计过程中变化的秒数
			}
		},
		mounted() {
			this.isDischarge = false;
			this.getMenuListFun();
		},
		destroyed() {
			this.isDischarge = true;
		},
		methods: {
			// 倒计时
			start() {
				// 避免可能出现的倒计时重叠情况
				this.clearTimer();
				if (this.timestamp <= 0) return;
				this.seconds = Number(this.timestamp);
				this.formatTime(this.seconds);
				this.timer = setInterval(() => {
					this.seconds--;
					// 发出change事件
					this.$emit('change', this.seconds);
					if (this.seconds < 0) {
						return this.end();
					}
					this.formatTime(this.seconds);
				}, 1000);
			},
			// 格式化时间
			formatTime(seconds) {
				// 小于等于0的话，结束倒计时
				seconds <= 0 && this.end();
				let [day, hour, minute, second] = [0, 0, 0, 0];
				day = Math.floor(seconds / (60 * 60 * 24));
				// 判断是否显示“天”参数，如果不显示，将天部分的值，加入到小时中
				// hour为给后面计算秒和分等用的(基于显示天的前提下计算)
				hour = Math.floor(seconds / (60 * 60)) - day * 24;
				// showHour为需要显示的小时
				let showHour = null;
				if (this.showDays) {
					showHour = hour;
				} else {
					// 如果不显示天数，将“天”部分的时间折算到小时中去
					showHour = Math.floor(seconds / (60 * 60));
				}
				minute = Math.floor(seconds / 60) - hour * 60 - day * 24 * 60;
				second = Math.floor(seconds) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60;
				// 如果小于10，在前面补上一个"0"
				showHour = showHour < 10 ? '0' + showHour : showHour;
				minute = minute < 10 ? '0' + minute : minute;
				second = second < 10 ? '0' + second : second;
				day = day < 10 ? '0' + day : day;
				this.d = day;
				this.h = showHour;
				this.i = minute;
				this.s = second;
			},
			//获取顶部广告菜单
			async getMenuListFun() {
				const {
					code,
					data
				} = await getAdList({
					pid: 10,
					terminal: 1
				})
				if (code == 1) {
					this.menuList = data
				}
			},
			// 停止倒计时
			end() {
				this.clearTimer();
				this.$emit('end', {});
			},
			reset() {
				this.clearTimer();
				this.seconds = Number(this.timestamp);

				this.s = this.timestamp;
				console.log(this.s)
			},
			// 清除定时器
			clearTimer() {
				if (this.timer) {
					// 清除定时器
					clearInterval(this.timer);
					this.timer = null;
				}
			},
			swiperChange(e) {
				console.log(e)
				this.currentSwiper = e.detail.current
			},
			menuJump(item) {
				menuJump(item)
			},
			goUrl(url) {
				this.$Router.push({
					path: url
				})
			},
			goPage(item) {
				let {
					link,
					link_type,
					params,
					is_tab
				} = item;
				switch (link_type) {
					case 1:
						""
					case 2:
						if (is_tab) {
							this.$Router.pushTab({
								path: link
							});
						} else {
							this.$Router.push({
								path: link,
								query: params
							})
						}
						break;
					case 3:
						this.$Router.push({
							path: link,
							query: params
						})
						break;
				}
			}
		},
		watch: {
			"themeList.template3"(val) {
				let _list = [];
				for (let i = 0; i < val.length; i++) {
					for (let j = 0; j < val[i].template_data.length; j++) {
						val[i].template_data[j].type = val[i].type;
						_list.push(val[i].template_data[j])
					}
				}
				if (_list.length <= 5) {
					this.navSwiperH = 200
				} else {
					this.navSwiperH = 380
				}
				this.newNavList = arraySlice(_list)
			},
			homeData(val) {
				this.hotSearch = val.hot_search;
				this.newsList = val.headlines;
				this.adList = val.ad;
			}
		},
		computed: {
			...mapGetters(["userInfo", 'appConfig', 'cartNum', 'sysInfo']),
			statusBarHeight() {
				return this.sysInfo.statusBarHeight + 'px'
			},
			navHeight() {
				return this.sysInfo.navHeight + 'px'
			},
		}
	}
</script>

<style lang="scss" scoped>
	.index-home {
		.home-head-bg-default {
			position: relative;
			display: flex;
			align-items: center;
			width: 100%;
			margin-top: -798rpx;
			padding: 0 20rpx;
			z-index: 2;

			.home-head-title {
				margin-left: 12rpx;
				font-size: 42rpx;
				font-family: cursive;
				font-weight: 700;
				color: #fff;
			}
		}

		.home-default-warp {
			position: relative;
			width: 100%;
			padding: 0 20rpx;

			.search-box {
				position: relative;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				background-color: #fff;
				border-radius: 100%;
				z-index: 2;

				.content {
					flex: 1;
				}

				.search-bth {
					position: absolute;
					width: 84rpx;
					height: 52rpx;
					right: 6rpx;
					top: 4rpx;
					line-height: 52rpx;
					border-radius: 30rpx;
					font-size: 22rpx;
					color: #fff;
					text-align: center;
				}
			}

			.content-warp {
				position: relative;
				margin-top: 320rpx;
				z-index: 2;

				.nav {
					position: relative;
					border-radius: 10rpx;

					.nav-item {
						width: 25%;

						.nav-icon {
							width: 60rpx;
							height: 56rpx;
						}
					}

					.dots {
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						bottom: 20rpx;
						display: flex;

						.dot {
							width: 10rpx;
							height: 6rpx;
							border-radius: 6rpx;
							margin-right: 10rpx;
							background-color: rgba(255, 44, 60, 0.4);

							&.active {
								width: 20rpx;
								background-color: $-color-primary;
							}
						}

					}

				}

				.information {
					display: flex;
					align-items: center;
					height: 60rpx;
					padding: 0 20rpx;
					background-color: #fff;
					border-radius: 10rpx;
				}

				.ad-space-box {
					display: flex;
					justify-content: space-between;

					.space-box {
						position: relative;
						width: 354rpx;
						height: 524rpx;

						.space-box-title {
							position: absolute;
							width: 180rpx;
							height: 35rpx;
							top: 20rpx;
							left: 40rpx;
						}

						.space-box-cell {
							position: absolute;
							width: 314rpx;
							height: 174rpx;
							left: 50%;
							margin-left: -157rpx;
							padding: 16rpx;

							.box-cell-title {
								margin-bottom: 14rpx;
								font-size: 24rpx;
								font-weight: 700;
								color: #3c2c2c;
							}

							.box-cell-con {
								display: flex;
								flex-wrap: wrap;
								justify-content: space-between;

								.grade-cell {
									display: inline-block;
									height: 46rpx;
									padding: 0 12rpx;
									margin-bottom: 10rpx;
									border: solid 2rpx #dd6552;
									border-radius: 8rpx;
									font-size: 22rpx;
									color: #dd6552;
									line-height: 44rpx;
								}
							}
						}

						.space-box-btn {
							position: absolute;
							width: 314rpx;
							height: 52rpx;
							left: 50%;
							bottom: 25rpx;
							margin-left: -157rpx;
							background-color: #db6250;
							border-radius: 10rpx;
							font-size: 22rpx;
							color: #fff;
							line-height: 50rpx;
							text-align: center;
						}
					}

					.ad-box {
						width: 346rpx;
						height: 524rpx;
						border-radius: 10rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
					}
				}

				.home-classify-1 {
					background-color: #fff;
					border-radius: 10rpx;

					.home-classify-title {
						display: flex;
						justify-content: space-between;
						align-items: center;
					}

					.home-classify-con {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						padding: 0 20rpx 30rpx 20rpx;

						.home-classify-book {
							width: 310rpx;
							margin-top: 30rpx;

							.classify-book-name {
								margin-top: 10rpx;
							}

							.classify-book-more {
								display: flex;
								height: 40rpx;
								padding: 0 16rpx;
								background-color: #fbebea;
								border-radius: 6rpx;
								font-size: 22rpx;
								color: #e96d5a;
								justify-content: space-between;
								align-items: center;

								.arrow_right {
									display: inline-block;
									width: 12rpx;
									height: 16rpx;
									margin-left: 10rpx;
									background-image: url('../../static/images/icon_right_red.png');
									background-repeat: no-repeat;
									background-size: contain;
								}
							}
						}
					}
				}

				.brand_box {
					display: flex;
					width: 100%;
					height: 410rpx;
					padding: 70rpx 20rpx 10rpx 20rpx;
					border-radius: 20rpx;
					flex-wrap: wrap;
					justify-content: space-between;

					.brand_box_cell {
						display: flex;
						background-color: #fff;
						border-radius: 10rpx;
						align-items: center;

						&.brand_type_1 {
							width: 329rpx;
							height: 73rpx;
						}

						&.brand_type_2 {
							width: 159rpx;
							height: 73rpx;
						}

						.brand_logo {
							width: 100%;
							height: 100%;
						}
					}
				}

				.goods_list_area {
					background-color: #fff;
					border-radius: 20rpx;

					.goods_area_head {
						position: relative;

						.goods_area_more {
							position: absolute;
							display: flex;
							align-items: center;
							top: 30rpx;
							right: 30rpx;
							font-size: 25rpx;
						}

						.countdown_wrap {
							position: absolute;
							display: flex;
							width: 100%;
							top: 100rpx;
							font-size: 28rpx;
							color: #fff;
							justify-content: center;
							align-items: center;

							.countdown_num {
								display: inline-block;
								width: 32rpx;
								height: 32rpx;
								margin: 0 10rpx;
								border-radius: 10rpx;
								background-color: #fff;
								font-size: 24rpx;
								color: #ff2d30;
								line-height: 34rpx;
								text-align: center;
							}

							.countdown_text {
								font-size: 24rpx;
							}
						}
					}

					.goods_area_body {
						display: flex;
						padding: 20rpx;
						margin-top: -50rpx;
						justify-content: space-between;

						.goods_list_cell {
							width: 215rpx;

							.goods-info {
								margin-top: 10rpx;

								.goods-name {
									font-size: 24rpx;
								}

								.goods-price {
									display: flex;
									justify-content: space-between;
									margin-top: 16rpx;
									padding-right: 16rpx;
								}
							}
						}
					}

					.choice_area_body {
						display: flex;
						padding: 0 20rpx 20rpx;
						margin-top: -20rpx;
						flex-wrap: wrap;
						justify-content: space-between;

						.home-choice-book {
							width: 158rpx;
							margin-top: 20rpx;

							.choice-book-name {
								text-align: center;
								padding: 10rpx 0;
							}
						}
					}

					.top20_area_body {
						display: flex;
						padding: 0 20rpx 20rpx;
						flex-wrap: wrap;
						justify-content: space-between;

						.home-top20-book {
							width: 216rpx;
							margin: 20rpx 0;

							.top20-book-name {
								text-align: center;
								padding: 10rpx 0;
							}
						}
					}
				}
			}
		}
	}
</style>